<template>
    <view class="dynamic-page">
      <header class="header-top">
        <image class="header-image" src="/static/header-bg.png" mode="aspectFill"></image>
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back-icon.png" mode="aspectFit"></image>
        </view>
        <image class="header-left-icon" src="/static/top-left-icon.png" mode="aspectFit"></image>
      </header>
  
      <!-- 标签切换 -->
      <view class="tabs">
        <text 
          :class="['tab-item', { 'active': activeTab === 'hot' }]" 
          @click="switchTab('hot')"
        >
          最热
        </text>
        <text 
          :class="['tab-item', { 'active': activeTab === 'latest' }]" 
          @click="switchTab('latest')"
        >
          最新
        </text>
      </view>
  
      <!-- 动态列表 -->
      <scroll-view 
        class="content-scroll" 
        scroll-y 
        @scrolltolower="onScrollToLower"
        lower-threshold="100"
        enable-back-to-top
      >
        <view class="content">
          <CommunityList ref="communityListRef" :tab="activeTab" />
        </view>
      </scroll-view>
    </view>
  </template>
  
<script setup>
import { ref, onMounted } from 'vue';
import CommunityList from '../index/components/CommunityList.vue'
  
  const activeTab = ref('hot')
  const communityListRef = ref(null)

  const goBack = () => {
    uni.navigateBack()
  }
  
  // 切换标签
  const switchTab = (tab) => {
    activeTab.value = tab
    // 刷新动态列表（重置到第一页）
    if (communityListRef.value) {
      communityListRef.value.refresh()
    }
  }
  
  onMounted(() => {
    // 页面加载完成
  })
  
  // 滚动到底部时加载更多
  const onScrollToLower = () => {
    console.log('动态列表页面：滚动到底部，scroll-view触发')
    if (communityListRef.value && communityListRef.value.loadMore) {
      communityListRef.value.loadMore()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dynamic-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
  }

  .header-top {
  position: relative;
  padding: 32rpx 0 48rpx;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #f0e6ff 100%);
  overflow: hidden;
  height: 280rpx;
  z-index: 0;
}

.header-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.back-button {
  position: absolute;
  left: 0rpx;
  top: 80rpx;
  width: 100rpx;
  height: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  padding: 10rpx;
}

.back-icon {
  width: 200rpx;
  height: 200rpx;
}

.header-left-icon {
  position: absolute;
  left: 100rpx;
  top: 60rpx;
  width: 200rpx; 
  height: 80rpx; 
  z-index: -1; 
}
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
    
    .search-container {
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50rpx;
      padding: 10rpx 20rpx;
      
      .search-bar {
        flex: 1;
        margin-right: 10rpx;
      }
      
      .search-icon {
        flex-shrink: 0;
      }
    }
  }
  
  .tabs {
    display: flex;
    justify-content: center;
    align-items: center;     
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    margin-top: -170rpx;
    padding: 0 20rpx;
    
    .tab-item {
      padding: 30rpx 30rpx;
      font-size: 32rpx;
      color: #666;
      position: relative;
      z-index: 1;
      margin-top: -40rpx;
      margin-bottom: 0rpx;
      
      &.active {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
      }
    }
  }
  
  .content-scroll {
    flex: 1;
    height: 0; /* 重要：让scroll-view在flex布局中正确计算高度 */
    position: relative;
    z-index: 1;
    background-color: #f8f8f8;
    border-radius: 20rpx 20rpx 0 0;
  }
  
  .content {
    padding: 0 17rpx;
  }
  </style>